<script setup>
	import {
		ref
	} from 'vue'

	const chartData = ref({
		categories: ["2023年", "2024年"],
		series: [{
				name: "牛肉",
				data: [40, 45]
			},
			{
				name: "乳制品",
				data: [18, 20]
			},
			{
				name: "本地紫菜",
				data: [10, 15]
			},
			
		]
	})

	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858",],
		padding: [15, 30, 0, 15],
		enableScroll: false,
		legend: {
			show: true,
			position: "top",
			itemGap: 10
		},
		xAxis: {
			type: 'value',
			min: 0,	
			max: 50,
			axisLabel: {
				formatter: '{value}%'
			}
		},
		yAxis: {
			type: 'category',
			axisLabel: {
				formatter: value => value
			},
			axisTick: {
				show: true,
				alignWithLabel: true
			}
		},
		extra: {
			bar: {
				type: "group",
				width: 30,
				categoryGap: 10,
				seriesGap: 5,
				// 核心解决方案：在此处关闭标签
				label: {
					show: false
				}
			}
		},
		tooltip: {
			show: true,
			yAxisLabel: false,
			xAxisLabel: false,
			backgroundColor: 'rgba(0,0,0,0.7)',
			borderRadius: 10,
			borderWidth: 0,
			textStyle: {
				color: '#fff'
			}
		}
	})
</script>

<template>
	<view class="charts-box">
		<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" canvasId="transportChart" />
	</view>
</template>

<style scoped lang="scss">
	.charts-box {
		width: 100%;
		height: 400rpx;
		// margin-top: 30rpx;
	}
</style>